<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	li{list-style: none; width: 100px; height: 30px; background-color: yellow; margin: 10px;}
	#div1{width: 100px; height: 100px; background-color: red; margin: 200px;}
	</style>
	<script type="text/javascript">
	window.onload = function () {
		var oUl = document.getElementById('ul1');
		var aLi = oUl.getElementsByTagName('li');
		var oDiv = document.getElementById('div1');

		for (var i = 0; i < aLi.length; i++) {
			aLi[i].draggable = "true";			//设置拖拽属性draggable

			aLi[i].ondragstart = function (ev) {
				var ev = ev || event;
				/*
						dataTransfer对象具备的方法
							1. setData( 字符串1, 字符串2或对象 );
							2. getData(字符串1)，与setData配合;
							3. effectAllowed : 设置光标样式().在拖拽开始设置，光标样式会在释放的区域显示
								光标样式有：none,copy,link,move,copyLink,copyMove,all和uninitialized;
							4. setDragImage : 三个参数--指定元素，坐标x，坐标y


							5. files: 获取【外部】拖拽的文件
								a)返回一个filesList列表
								b)filesList下有个type属性，返回文件的类型
				*/
				ev.dataTransfer.setData('haha', '你好');

				ev.dataTransfer.effectAllowed = 'link';

				ev.dataTransfer.setDragImage(oDiv, 0, 0);		//一般取0,0位于左上角
			}
		};

		oDiv.ondragenter = function () {
			this.innerHTML = '可以释放啦'
		}

		oDiv.ondragover = function () {
		
			return false;
		}

		oDiv.ondragleave = function () {
			this.innerHTML = '拖放至此区域';
		}

		oDiv.ondrop = function (ev) {			//要想触发drop事件，就必须在dragover事件中阻止默认行为
			var ev = ev || event;
			// alert( ev.dataTransfer.getData('haha') );		//如果拖拽的是外部文件是不会有值的

			var fs = ev.dataTransfer.files;
			alert(fs);
			alert(fs.length)
			alert( fs[0].type );

			return false;		//阻止事件默认行为
		}
	}
	</script>
</head>
<body>
	<ul id="ul1">
		<li>a</li>
		<li>b</li>
		<li>c</li>
	</ul>
	<div id="div1">拖放至此区域</div>
</body>
</html>         